{include file="default/pc/public/header"}
<div class="kt-container  {$theme_layout_class}  kt-grid__item kt-grid__item--fluid">
    <div class="kt-portlet">
        <div class="kt-portlet__body kt-portlet__body--fit">
            <div class="kt-grid kt-wizard-v3 kt-wizard-v3--white" id="kt_wizard_v3" data-ktwizard-state="step-first">
                <div class="kt-grid__item">

                    <!--begin: Form Wizard Nav -->
                    {include file="default/pc/public/step"}

                    <!--end: Form Wizard Nav -->
                </div>

            </div>
        </div>
    </div>
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                    提交工单
                </h3>
            </div>
        </div>

        <!--begin::Form-->
        <div class="kt-portlet__body">
            <form class="kt-form kt-form--label-right  form form-builder  layui-form" id="form-builder" name="form-builder" action="{:url('ticket/index/add')}" method="post">
                <input type="hidden" name="product_id" value="{$product_id}">
                <input type="hidden" name="category_id" value="{$category_id}">
                <div class="row">
                    <div class="col-xl-2"></div>
                    <div class="col-xl-8">
                        <div class="kt-section kt-section--first">
                            <div class="kt-section__body">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">问题标题</label>
                                    <div class="col-9">
                                        <input name="title" class="form-control" type="text" placeholder="简要描述问题，20个字以内">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">问题描述</label>
                                    <div class="col-9">
                                        <textarea name="description" class="form-control" id="exampleTextarea" rows="3" placeholder='问题详情，若提交密码等机密信息，请通过"机密信息"方式添加，并在问题处理完毕后及时修改。'></textarea>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">手机号</label>
                                    <div class="col-9">
                                        <input name="phone" class="form-control" type="text" placeholder="紧急情况时，客服会与您电话联系， 请填写正确手机号 !">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label"></label>
                                    <div class="col-9">
                                        <div class="kt-checkbox-inline">
                                            <label class="kt-checkbox">
                                                <input type="radio" name="contact_time" value="1"> 允许任何时刻联系我
                                                <span></span>
                                            </label>
                                            <label class="kt-checkbox">
                                                <input type="radio" checked="" name="contact_time" value="0"> 每日9:00 - 18:00可电话联系
                                                <span></span>
                                            </label>
                                            <label class="kt-checkbox">
                                                <input type="radio" name="contact_time" value="-1"> 不要打电话联系
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">机密信息（非必填项）</label>
                                    <div class="col-9">
                                        <textarea name="protected_info" class="form-control"  rows="3" placeholder='请在此处填写账号、密码等机密信息，提交后，机密信息将做加密处理'></textarea>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">上传附件:</label>
                                    <div class="col-9">
                                        <style>
                                            .dropzone .dz-preview .dz-details .dz-filename {
                                                white-space: normal;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                word-break: break-all;
                                                height: 4rem;
                                            }
                                            .dropzone .dz-preview .dz-details {
                                                padding: 1em 1em;
                                            }

                                        </style>
                                        <input class="attach" type="hidden" id="_upload_input_11" name="cover_ids" value="0">
                                        <div class="kt-dropzone dropzone kt-dropzone--success dz-clickable" id="ktDropzonecover_ids">
                                            <div class="kt-dropzone__msg dz-message needsclick">
                                                <h3 class="kt-dropzone__msg-title">拖动文件至此或者点击上传.</h3>
                                                <span class="kt-dropzone__msg-desc">文件类型只能是.jpg,.gif,.png,.jpeg。</span>
                                            </div>
                                        </div>
                                        <script type="text/javascript">
                                            //下面两行是js和jquery的方式实现绑定div的例子，你选择一种即可
                                            //var myDropzone = new Dropzone("#myId", { url: "{{ url_for('upload_file') }}" });
                                            Dropzone.autoDiscover = false;
                                            $("#ktDropzonecover_ids").dropzone({
                                                accept: function(file, done) {
                                                    if (file.name == "justinbieber.jpg") {
                                                        done("Naha, you don't.");
                                                    } else {
                                                        done();
                                                    }
                                                },
                                                url: "/file/uploadFile/uploadFile?session_id=1stbrbl6tk8q4g5168cemaicpj",//文件提交地址
                                                method:"post",  //也可用put
                                                paramName:"file", //默认为file
                                                maxFiles:100,//一次性上传的文件数量上限
                                                maxFilesize: 20, //文件大小，单位：MB
                                                acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型
                                                addRemoveLinks:true,
                                                parallelUploads: 20,//一次上传的文件数量
                                                //previewsContainer:"#preview",//上传图片的预览窗口
//        previewTemplate: document.querySelector('#preview-template').innerHTML,//设置显示模板
                                                dictDefaultMessage:'拖动文件至此或者点击上传',
                                                dictMaxFilesExceeded: "您最多只能上传1个文件！",
                                                dictResponseError: '文件上传失败!',
                                                dictInvalidFileType: "文件类型只能是.jpg,.gif,.png,.jpeg,.zip,.rar。",
                                                dictFallbackMessage:"浏览器不受支持",
                                                dictFileTooBig:"文件过大上传文件最大支持.",
                                                dictRemoveLinks: "删除",
                                                dictCancelUpload: "上传中...",
                                                dictRemoveFile:"删除文件",
                                                init:function(){
                                                    thisDropzone = this;




                                                    this.on("addedfile", function(file) {
                                                        //上传文件时触发的事件
                                                    });
                                                    this.on("success",function(file,data){
                                                        //上传成功触发的事件
                                                        console.log('ok');
                                                        if (data.status==1) {
                                                            var ids = $("#_upload_input_11").val();
                                                            ids = ids.split(',');
                                                            console.log('ids:'+ids);
                                                            if( ids.indexOf(data.file.id) == -1){
                                                                var rids = admin_image.upAttachVal('add',data.file.id, $(":input[name='cover_ids']"));
                                                                rids =admin_image.upAttachVal('del','0', $(":input[name='cover_ids']"));
                                                                console.log('rids:'+rids);
                                                                console.log('rids.length:'+rids.length);
                                                            }else{
                                                                console.log(ids.indexOf(data.file.id));
                                                                swal.fire({
                                                                    "title": _THE_PICTURE_ALREADY_EXISTS_WITH_SINGLE_,
                                                                    "text": "上传失败，请检查文件格式及大小限制，请删除此文件重新选择文件上传。",
                                                                    "type": "error",
                                                                    "confirmButtonClass": "btn btn-secondary"
                                                                });
                                                            }
                                                        } else {
                                                            file.previewElement.remove();
                                                            swal.fire({
                                                                "title": data.info,
                                                                "text": "上传失败，请检查文件格式及大小限制，请删除此文件重新选择文件上传。",
                                                                "type": "error",
                                                                "confirmButtonClass": "btn btn-secondary"
                                                            });
                                                        }
                                                    });
                                                    this.on("error",function (file,data) {
                                                        //上传失败触发的事件
                                                        console.log('fail1');
                                                        console.log(file);
                                                        console.log(data);
                                                        var message = '';
                                                        //lavarel框架有一个表单验证，
                                                        //对于ajax请求，JSON 响应会发送一个 422 HTTP 状态码，
                                                        //对应file.accepted的值是false，在这里捕捉表单验证的错误提示
                                                        if (!file.accepted){
                                                            file.previewElement.remove();
                                                            //控制器层面的错误提示，file.accepted = true的时候；
                                                            swal.fire({
                                                                "title": '文件['+file.name+']上传失败：'+data,
                                                                "text": "上传失败，请检查文件格式及大小限制，请删除此文件重新选择文件上传。",
                                                                "type": "error",
                                                                "confirmButtonClass": "btn btn-secondary"
                                                            });
                                                        }
                                                        console.log(message);
                                                    });
                                                    this.on("removedfile",function(file,data){
                                                        //删除文件时触发的方法
                                                        // console.log('remove-id',file.name);
                                                        var rid=file.id;
                                                        var idsa = admin_image.upAttachVal('del',rid, $(":input[name='cover_ids']"));
                                                        console.log('_upload_input',idsa);

//                if (file_id){
//                    $.post('/admin/del/'+ file_id,{'_method':'DELETE'},function (data) {
//                        console.log('删除结果:'+data.message);
//                    })
//                }

                                                    });
                                                }
                                            });
                                        </script>
                                    </div>
                                </div>
                            </div>
                            <div class="kt-portlet__foot kt-portlet__no-border ">
                                <div class="kt-form__actions kt-form__actions--solid">
                                    <div class="row kt-align-center ">
                                        <div class="col-lg-12">
                                            <button class="btn btn-sm btn-success submit   ajax-post kt-confirm" type="submit" target-form="form-builder">提交</button>
                                            <!--底部按钮-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2"></div>
                </div>
            </form>
        </div>

        <!--end::Form-->
    </div>
</div>
<script>
    admin_image ={
        /**
         *
         * @param obj
         * @param attachId
         */
        removeImage: function (obj, attachId) {
            // 移除附件ID数据
            this.upAttachVal('del', attachId, obj);
            obj.parents('.each').remove();

        },
        /**
         * 更新附件表单值
         * @return void
         */
        upAttachVal: function (type, attachId,obj) {
            console.log(type+attachId);
            var $attach_ids = obj.parents('.form-group').find('.attach');
            var attachVal = $attach_ids.val();
            console.log('attachVal:'+attachVal);
            var attachArr = attachVal.split(',');
            console.log('attachArr:'+attachArr+'-----length:'+attachArr.length);

            var newArr = [];
            for (var i in attachArr) {
                console.log('i:'+i);
                if (attachArr[i] !== '' && attachArr[i] !== attachId.toString() ) {
                    newArr.push(attachArr[i]);
                }
            }
            console.log('newArr1:'+newArr);
            type === 'add' && newArr.push(attachId);
            console.log('newArr2:'+newArr);
            $attach_ids.val(newArr.join(','));
            return newArr;
        }
    }
</script>